function sfkz (id,dj) {
	this.c = document.getElementById(id).getContext('2d');
	this.width = document.getElementById(id).width;
	this.height = document.getElementById(id).height;
	this.dj = dj;
	this.bj = 20;
	this.xs = 2;
	this.isxs = true;
	this.sjb = 4;
	this.number = 1;
	this.time;
	this.timenum = 0;
}

sfkz.prototype = {
	constructor:sfkz,
	square:function () {
		this.c.beginPath();
		this.c.arc(this.width / 2, this.height / 2,4, 0, Math.PI * 2, true);
		this.c.fillStyle = "#000";
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 - (this.bj * this.xs - 16) - 16, this.height / 2 - this.bj * this.xs,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 - (this.bj * this.xs - 16) / 2  - 8, this.height / 2 - this.bj * this.xs,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2, this.height / 2 - this.bj * this.xs,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 + (this.bj * this.xs - 16) / 2 + 8, this.height / 2 - this.bj * this.xs,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 + (this.bj * this.xs - 16) + 16, this.height / 2 - this.bj * this.xs,4, 0, Math.PI * 2, true);
		this.c.fill();
		
		this.c.beginPath();
		this.c.arc(this.width / 2 - (this.bj * this.xs - 16) - 16, this.height / 2 + this.bj * this.xs,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 - (this.bj * this.xs - 16) / 2 - 8, this.height / 2 + this.bj * this.xs,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2, this.height / 2 + this.bj * this.xs,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 + (this.bj * this.xs - 16) / 2 + 8, this.height / 2 + this.bj * this.xs,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 + (this.bj * this.xs - 16) + 16, this.height / 2 + this.bj * this.xs,4, 0, Math.PI * 2, true);
		this.c.fill();
		
		this.c.beginPath();
		this.c.arc(this.width / 2 - this.bj * this.xs, this.height / 2,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 - this.bj * this.xs, this.height / 2 - (this.bj * this.xs - 16) / 2 - 8,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 - this.bj * this.xs, this.height / 2 + (this.bj * this.xs - 16) / 2 + 8,4, 0, Math.PI * 2, true);
		this.c.fill();
		
		
		this.c.beginPath();
		this.c.arc(this.width / 2 + this.bj * this.xs, this.height / 2,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 + this.bj * this.xs, this.height / 2 - (this.bj * this.xs - 16) / 2 - 8,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2 + this.bj * this.xs, this.height / 2 + (this.bj * this.xs - 16) / 2 + 8,4, 0, Math.PI * 2, true);
		this.c.fill();
		this.c.closePath();
	},
	round:function () {
		this.c.beginPath();
		this.c.arc(this.width / 2, this.height / 2,4, 0, Math.PI * 2, true);
		this.c.fillStyle = "#000";
		this.c.fill();
		this.c.beginPath();
		this.c.arc(this.width / 2, this.height / 2,this.bj * this.xs, 0, Math.PI * 2, true);
		this.c.stroke();
		this.c.closePath();
	},
	sutter:function () {
		var con = $(".st");
		con.html("");
		var o = this;
		var wh = Math.floor(100 / this.sjb);
		var rs = function(a, b) {    
			return Math.random() > 0.4 ? -1 : 1;
		}
		var arr =[];
		for (var i = 0; i < this.sjb * this.sjb; i++) {
			arr[i] = i + 1;
		}
		arr.sort(rs);
		for (var i = 0;i < arr.length; i++) {
			con.append('<div style="width:'+wh+'%;height:'+wh+'%;line-height:'+wh*2+'px" class="sz" id="d'+arr[i]+'">'+arr[i]+'</div>');
		}
		
		$('.sz').on('click',function () {
			var num = this.innerHTML;
			o.stb(num);
		});
	},
	stb:function (num) {
		if (num == 1) {
			this.starttime();
		}
		if (this.number == num) {
			$("#d"+num).html("");
			if (this.number == this.sjb * this.sjb) {
				alert("成功!用时:" + this.timenum + "秒");
				this.cleartime();
				this.sutter();
			}
			this.number++;
		}
	},
	starttime:function () {
		var o = this;
		this.timenum = 0;
		this.time = window.setInterval(function () {
			o.timenum++;
		},1000);
	},
	cleartime:function () {
		this.time = window.clearInterval(this.time);
	},
	fxkz:function (o) {
		o.c.clearRect(0,0,o.width,o.height);
		o.square();
		if (this.xs == 6) {
			this.isxs = false;
		} 
		if (this.xs == 2) {
			this.isxs = true;
		}
		if(this.isxs){
			this.xs++;
		} else {
			this.xs--;
		}
		setTimeout(function () {
			o.fxkz(o);
		},500);
	},
	yxkz:function (o) {
		o.c.clearRect(0,0,o.width,o.height);
		o.round();
		if (this.xs == 8) {
			this.isxs = false;
		} 
		if (this.xs == 2) {
			this.isxs = true;
		}
		if(this.isxs){
			this.xs+=2;
		} else {
			this.xs-=2;
		}
		setTimeout(function () {
			o.yxkz(o);
		},500);
	}
}

